<template>
    <div class="taskDetailsT">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <span>任务详情</span>
            <i class="iconfont iconzuojiantou" style="color: white;"></i>
        </div>
        <div class="DetailsT-content">
            <div class="content-slideshow">
                <van-swipe :autoplay="3000" indicator-color="#FFFFFF">
                    <van-swipe-item >
                        <!-- <img v-lazy="taskObject.moonlightedUrl" /> -->
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="content-name">
                <p>{{taskObject.moonlightedName}}</p>
                <p>
                    <span>发布时间:</span>
                    <span>{{taskObject.moonlightedDate}}</span>
                </p>
            </div>
            <div class="content-form">
                <p>
                    <span class="form-one">任务类型:</span>
                    <span class="form-two">{{taskObject.moonlightedType}}</span>
                </p>
                <p>
                    <span class="form-one">所需人员:</span>
                    <span class="form-two">{{taskObject.moonlightedNeed}}人</span>
                    <span class="form-three">已报名:</span>
                    <span class="form-four">{{taskObject.moonlightedLook==''?'0':taskObject.moonlightedLook}}人</span>
                </p>
            </div>
            <div class="content-detailed">
                <div class="detailed-top">
                    <p>详细说明</p>
                    <p>{{taskObject.moonlightedDir}}</p>
                </div>
                <div class="detailed-buttom">
                     <!-- <button @click="registraeSuccess" v-show="successName">报名成功</button> -->
                     <!-- <button @click="giveJob" v-show="failJob">放弃工作</button> -->
                     <!-- <button @click="makeCall">拨打电话</button> -->
                     <button v-if="taskObject.cctMyjob.jobStatus=='工作中'"  @click="giveJob">放弃工作</button>
                     <button v-if="taskObject.cctMyjob.jobStatus=='工作中'"  @click="comJob">完成工作</button>
                     <button v-if="taskObject.cctMyjob.jobStatus=='已报名'"  @click="registraeSuccess">立即报名</button>
                     <button v-if="taskObject.cctMyjob.jobStatus=='已报名'" @click="phoneCall(taskObject.publisherTel)">拨打电话</button>
                </div>
            </div>
        </div>
        <!-- 弹出层 -->
       <div class="cancel-Box" v-show="ShowS" :style="CHeight">
            <div class="cancel-wicket">
                <div class="cancel-title">
                    <span>取消理由</span>
                    <img src="../assets/taskdetail/Colse.png" alt="" @click="wicket">
                </div>
                <div class="cancel-center">
                    <div class="cancel-charebox">
                        <div class="charebox">
                            <div @click="chareS(0,'选错了')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="chare">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>选错了</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(1,'干不了')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="chareone">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>干不了</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(2,'不想干了')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="charetwo">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>不想干了</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(3,'钱太少')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="charethree">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>钱太少</span>
                        </div>
                        <div class="charebox">
                            <div @click="chareS(4,'其他')">
                                <img src="../assets/taskdetail/Boxone.png" alt="" v-if="charefour">
                                <img src="../assets/taskdetail/Boxtwo.png" alt="" v-else>
                            </div>
                            <span>其他</span>
                        </div>
                    </div>
                    <div class="charebox-Text">
                        <textarea autofocus rows="0" cols="value" placeholder="填写详细理由" maxlength="500"  v-model="textName">{{textName}}</textarea>
                        <span>{{figure}}/500</span>
                    </div>
                    <div class="center-button" >
                        <button @click="cancel()">提交</button>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
import { Toast, Lazyload } from "vant";
export default {
  name: "taskDetails",
  data() {
    return {
      id: "",
      name: "",
      scheduleStatusLeft: 1, //进度状态
      scheduleStatusRight: 0, //进度状态
      //弹窗
      ShowS: false,
      chare: false,
      chareone: true,
      charetwo: true,
      charethree: true,
      charefour: true,
      textName: "",
      phoneNumber: "13673379816", //拨打电话
      CHeight: {
        height: "100vh"
      },
      heightS: "",
      taskId: "", //任务详情id
      taskObject: {},
      userId: "",
      successName: true,
      failJob: false,
      text: ""
    };
  },
  mounted() {
    //监听浏览器返回事件
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.onClickLeft, false);
    }
    //监听手机屏幕的高度
    this.heightS = window.screen.height;
    window.onresize = () => {
      var heightS =
        document.documentElement.clientHeight || document.body.clientHeight;
      var SS = heightS * 2 / 100;
      if (SS < 9.6) {
        var HH = String(this.heightS * 2 / 100);
        this.CHeight.height = HH + "rem";
      } else {
        this.CHeight.height = "100vh";
      }
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("key")).userId;
    this.taskId = this.$route.query.id;
    this.getTaskDetail();
    if (this.$route.query.success) {
      this.failJob = true;
      this.successName = false;
    }
  },
  destroyed() {
    // 销毁监听浏览器事件
    window.removeEventListener("popstate", this.onClickLeft, false);
  },
  computed: {
    StatusLeft() {
      if (this.scheduleStatusLeft == 1) {
        return "立即报名";
      }
      if (this.scheduleStatusLeft == 2) {
        return "工作中";
      }
      if (this.scheduleStatusLeft == 3) {
        return "已完成";
      }
      if (this.scheduleStatusLeft == 4) {
        return "放弃工作";
      }
    },
    StatusRight() {
      if (this.scheduleStatusRight == 0) {
        return "拨打电话";
      }
      if (this.scheduleStatus == 1) {
        return "工作中";
      }
      if (this.scheduleStatus == 2) {
        return "已完成";
      }
    },
    figure() {
      return this.textName.length;
    }
  },
  methods: {
    //放弃工作
    giveJob() {
      //   Toast("放弃工作");
      this.ShowS = true;
    },
    //完成工作
    comJob() {
      this.$router.push({
        path: "/perform",
        query: {
          jobName: this.taskObject.moonlightedName,
          agencyId: this.taskObject.superiorAgentid,
          userId: this.taskObject.cctMyjob.userId,
          jobStrus: this.taskObject.status,
          url:'TaskDetailsT',
          id:this.$route.query.id
        }
      });
    },
    onClickLeft() {
      // if(this.name == "我的任务"){
      //     this.$router.push("/MyAssignment");
      // }
      this.$router.push("/MyAssignment");
    },
    //报名成功
    registraeSuccess() {
      this.$router.push({
        path: "/signUp",
        query: {
          name: this.name,
          id: this.taskId,
          userId: this.userId,
          url: "/TaskDetailsT"
        }
      });
    },
    //拨打电话
    phoneCall(tel) {
      window.location.href = "tel://" + tel;
    },

    StatusRightS() {
      if (this.scheduleStatusRight == 0) {
        window.location.href = "tel://" + this.phoneNumber;
      }
    },
    wicket() {
      this.ShowS = false;
    },
    //单选按钮
    chareS(index, text) {
      if (index == 0) {
        this.chare = !this.chare;
        this.text = this.chare == false ? text : "";
        console.log(this.text);
        this.chareone = true;
        this.charetwo = true;
        this.charethree = true;
        this.charefour = true;
      }
      if (index == 1) {
        this.text = text;
        this.chareone = false;
        this.chare = true;
        this.charetwo = true;
        this.charethree = true;
        this.charefour = true;
      }
      if (index == 2) {
        this.text = text;
        this.charetwo = false;
        this.chare = true;
        this.chareone = true;
        this.charethree = true;
        this.charefour = true;
      }
      if (index == 3) {
        this.text = text;
        this.charethree = false;
        this.chare = true;
        this.chareone = true;
        this.charetwo = true;
        this.charefour = true;
      }
      if (index == 4) {
        this.text = text;
        this.charefour = false;
        this.chare = true;
        this.chareone = true;
        this.charetwo = true;
        this.charethree = true;
      }
    },
    //获取任务详情数据
    getTaskDetail() {
      this.$axios
        .post("/cct/myjob/findByUserIdJobId", {
          jobId: this.taskId,
          userId: this.userId
        })
        .then(res => {
          if (res.data.code == 0) {
            console.log("获取任务详情", res.data.data);
            this.taskObject = res.data.data;
            this.name = res.data.data.moonlightedName;
          }
        });
    },
    cancel() {
      var secletId =localStorage.getItem("sectedId");
      this.$axios
        .post("/cct/cancel/jobCancel", {
          jobId: this.taskObject.cctMyjob.jobId,
          jobName: this.taskObject.moonlightedName,
          userId: this.taskObject.cctMyjob.userId,
          reson: this.text + this.textName,
          agentId: secletId?secletId:0,
          agentName: this.taskObject.superiorAgentName,
          agentTel: this.taskObject.superiorAgentTel,
          strus: this.taskObject.status,
          
        })
        .then(res => {
          console.log("取消任务", res.data.code);
          if (res.data.code == 0) {
            Toast("取消成功");
            this.ShowS = false;
          } else {
            Toast("已经在审核了~");
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.taskDetailsT {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 0;
  // position: relative;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
  }
  .DetailsT-content {
    .content-slideshow {
      img {
        width: 100%;
        height: 4.2rem;
      }
    }
    .content-name {
      width: 100%;
      height: 1.86rem;
      padding: 0.33rem 0.34rem;
      background: #ffffff;
      p {
        &:nth-child(1) {
          font-size: 0.28rem;
          font-family: "PingFang-SC-Medium";
          font-weight: 600;
          color: #3c3c3c;
          line-height: 0.74rem;
        }
        &:nth-child(2) {
          font-size: 0.21rem;
          font-family: "PingFang-SC-Medium";
          font-weight: 400;
          color: #999999;
          line-height: 0.3rem;
          margin-top: 0.15rem;
          span {
            &:nth-child(2) {
              margin-left: 0.1rem;
            }
          }
        }
      }
    }
    .content-form {
      width: 100%;
      height: 1.44rem;
      margin-top: 0.1rem;
      background: #ffffff;
      p {
        &:nth-child(1) {
          padding: 0.19rem 0.33rem;
          .form-one {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 600;
            color: #666666;
          }
          .form-two {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 600;
            color: #999999;
            margin-left: 0.2rem;
          }
        }
        &:nth-child(2) {
          padding: 0.19rem 0.33rem;
          .form-one {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 600;
            color: #666666;
          }
          .form-two {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 600;
            color: #999999;
            margin-left: 0.2rem;
          }
          .form-three {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 600;
            color: #999999;
            margin-left: 2.88rem;
          }
          .form-four {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 600;
            color: #999999;
            margin-left: 0.2rem;
          }
        }
      }
    }
    .content-detailed {
      width: 100%;
      margin-top: 0.1rem;
      overflow: auto;
      .detailed-top {
        width: 100%;
        height: 3.37rem;
        padding: 0.24rem 0.33rem;
        overflow: auto;
        p {
          &:nth-child(1) {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
            color: #666666;
          }
          &:nth-child(2) {
            font-size: 0.24rem;
            font-family: "PingFang-SC-Medium";
            color: #333333;
            margin-top: 0.28rem;
            line-height: 0.48rem;
          }
        }
      }
      .detailed-buttom {
        width: 100%;
        height: 1rem;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
          height: 1rem;
          font-size: 0.3rem;
          width: 50%;
          &:nth-child(1) {
            // width: 3.75rem;
            // height: 1rem;
            // font-size: 0.3rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
            color: #38a83f;
            background: rgb(215, 238, 217);
          }
          &:nth-child(2) {
            // width: 3.75rem;
            // height: 1rem;
            // font-size: 0.3rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
            color: #ffffff;
            background: #38a83f;
          }
          &:nth-child(3) {
            // width: 3.75rem;
            // height: 1rem;
            // font-size: 0.3rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
            color: #ffffff;
            background: #38a83f;
          }
        }
      }
    }
  }
  .cancel-Box {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    .cancel-wicket {
      width: 5.9rem;
      height: 7.98rem;
      background: #ffffff;
      margin: 2.3rem auto;
      border-radius: 0.1rem;
      .cancel-title {
        font-family: "PingFang-SC-Medium";
        color: #333333;
        padding: 0.32rem 0rem;
        text-align: center;
        span {
          font-size: 0.3rem;
          font-family: "PingFang-SC-Medium";
          font-weight: 530;
          color: #333333;
          line-height: 0.28rem;
          margin-left: 0.28rem;
        }
        img {
          float: right;
          width: 0.28rem;
          // line-height: 0.28rem;
          margin-right: 0.28rem;
        }
      }
      .cancel-center {
        width: 100%;
        height: 6rem;
        padding: 0rem 0.48rem;
        .cancel-charebox {
          width: 100%;
          height: 4rem;
          .charebox {
            display: flex;
            margin-bottom: 0.5rem;
          }
          img {
            width: 0.32rem;
            height: 0.32rem;
          }
          span {
            font-size: 0.26rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 530;
            color: #333333;
            margin-left: 0.3rem;
          }
        }
        .charebox-Text {
          width: 100%;
          height: 2rem;
          margin: 0rem auto;
          position: relative;
          textarea {
            color: #333;
            font-size: 0.26rem;
            width: 100%;
            height: 2rem;
            // border: 1px solid rgb(206, 206, 206);
            background: #f8f8f8;
            resize: none;
            padding: 0.17rem 0.17rem;
          }
          span {
            position: absolute;
            top: 1.6rem;
            left: 4.1rem;
            font-size: 0.22rem;
            color: #c3c3c3;
          }
        }
        .center-button {
          width: 100%;
          height: 0.6rem;
          margin-top: 0.2rem;
          button {
            width: 60%;
            height: 0.6rem;
            font-size: 0.3rem;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
            color: #ffffff;
            background: #38a83f;
            margin-left: 20%;
            border-radius: 0.1rem;
          }
        }
      }
    }
  }
}
</style>
